<template>
  <div v-loading="loading" class="app-container">
    <div style="text-align: center;color: red">注意默认只查询当天数据，如果查询其他的，请选择范围查询"</div>
    <el-card class="first">
      <el-form ref="showForm"  :model="queryParams" :inline="true" lable-width="60px">
        <el-form-item label="选择日期">
          <el-date-picker
            v-model="dateRange"
            size="small"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!--合计收入-->
    <el-card class="cardmargin">
      合计收费:<span>￥{{restatisticsObj.totalRevenue}}</span>
    </el-card>
    <!--收支概况-->
    <el-card class="cardmargin">
      收支概况:
      <span class="spancls">总收入:￥{{restatisticsObj.survey.total}}</span>
      <span class="spancls spanred">总退费:￥{{restatisticsObj.survey.tRefund}}</span>
    </el-card>
    <el-card class="cardmargin">
      收入渠道:
      <span class="spancls">现金支付:￥{{restatisticsObj.channel.cashPay}}</span>
      <span class="spancls">支付宝:￥{{restatisticsObj.channel.alipayPay}}</span>
      <span class="spancls spanred">现金退费:￥{{restatisticsObj.channel.cashRefund}}</span>
      <span class="spancls spanred">支付宝退费:￥{{restatisticsObj.channel.alipayRefund}}</span>
    </el-card>
    <!--图-->
    <el-card>
      <el-row :gutter="32"><!--排版工具：行-->
        <el-col :xs="24" :sm="24" :lg="8">
          <div>
            <pie-chart ref="p1" :prop-pie-data="surveyView"/>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <div>
            <pie-chart ref="p2" :prop-pie-data="incomChannel"/>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
        <div>
          <pie-chart ref="p3" :prop-pie-data="refund"/>
        </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import PieChart from './dashboard/PieChart'
    export default {
        components: {PieChart},
        dashboard:{
          PieChart
        },
        data() {
            return {
                //遮罩
                loading: false,
                //查询参数
                queryParams:{},
                //日期范围
                dateRange:undefined,
                //数组结构
                restatisticsObj:{
                    totalRevenue:0.00,//合计收入
                    survey:{//收支概况
                        total:0.00,//总收入
                        tRefund:0.00//总退费
                    },
                    channel:{//收入渠道
                        cashPay:0.00,//现金支付
                        alipayPay:0.00,//支付宝支付
                        cashRefund:0.00,//现金退费
                        alipayRefund:0.00//支付宝退费
                    },
                },
                //声明图标数据(传值)
                surveyView:{
                    title:'收支概况',
                    data:[
                        { value: 320, name: '收费金额' },
                        { value: 240, name: '退费金额' }
                    ]
                },
                incomChannel:{
                    title:'收入渠道',
                    data:[
                        { value: 2, name: '现金收入' },
                        { value: 1, name: '支付宝收入' }
                    ]
                },
                refund:{
                    title:'退款',
                    data:[
                        { value: 200, name: '现金退费' },
                        { value: 100, name: '支付宝退费' }
                    ]
                }
            }
        },
        created() {

        },
        methods:{
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.dateRange = [];
                this.resetForm("queryForm");
                this.handleQuery();
            },
    }

    }
</script>

<style scoped>
  .cardmargin{
    margin-bottom: 3px;
  }
  .spancls{
    margin-left: 80px;
    display: inline-block;
  }
  .spanred{
    color:red;
  }
</style>
